<template>
  <div class="mod-sys__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="getList()">
      <el-form-item label="课程名称">
        <el-input v-model="state.dataForm.courseName" placeholder="课程名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="授课老师">
        <el-input v-model="state.dataForm.teacherName" placeholder="授课老师" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <TableWrapper
      :valueData="pageList"
      :columns="columns"
      :optrations="admin ? '': optrations "
      @pageSize="pageSize"
      @currentPage="currentPage"
      :pageCurrent="{...pageCurrent,total}"
    >
      <template #teacherId="{ row }">{{ getTeacherName(row.teacherId) }}</template>
      <template #courseStatus="{ row }">{{ cStatus[row.courseStatus] }}</template>
    </TableWrapper>
    <add-or-update ref="addOrUpdateRef" :teacherList="teacherList" @refreshDataList="getList"></add-or-update>
    <add-or-updateq ref="addOrUpdateRefq" :teacherList="teacherList" @refreshDataList="getList"></add-or-updateq>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onMounted } from "vue";
import { useAppStore } from "@/store";
import TableWrapper from "@/components/table/TableWrapper.vue";
import AddOrUpdate from "./user-add-or-update.vue";
import AddOrUpdateq from "./user-add-or-updateq.vue";

import { ElMessage, ElMessageBox } from "element-plus";
import baseService from "@/service/baseService";
const teacherList = ref([]);
const pageList = ref([]);
const view = reactive({
  getDataListIsPage: true
});
const state = reactive({ ...useView(view), ...toRefs(view) });
// 判断 管理员账号 老师账号 学生账号 cam:admin cam:teacher cam:student
const admin = ref(state.hasPermission("cam:admin"));
const teacher = ref(state.hasPermission("cam:teacher"));
const student = ref(state.hasPermission("cam:student"));
const total = ref("0");
const pageCurrent = reactive({
  pageNum: "1",
  pageSize: 20
});
const cStatus = {
  0: "未开始",
  1: "考勤中",
  2: "已结束"
  //课程状态 0未开始，1-考勤中，2-已结束
};
const columns = ref(
  admin.value || teacher.value
    ? [
        {
          value: "courseName",
          label: "课程名称"
        },
        {
          value: "teacherName",
          label: "授课老师"
        },
        {
            value: 'maxSize',
            label: '最大选课人数'
        },
        {
          value: "currentSize",
          label: "课程已选人数"
        },
        {
          value: "signNum",
          label: "签到人数"
        },
        {
          value: "noAttenNum",
          label: "待签到人数"
        },
        {
          value: "leaveNum",
          label: "请假人数"
        },
        {
          value: "courseStatus",
          label: "课程情况"
        }
      ]
    : [
        {
          value: "courseName",
          label: "课程名称"
        },
        {
          value: "teacherName",
          label: "授课老师"
        },
        {
          value: "classRoom",
          label: "课程教室"
        },
        {
          value: "courseStatus",
          label: "课程情况"
        },
        {
          value: "attenStatus",
          label: "签到情况"
        }
      ]
);
const optrations = teacher.value
  ? [
      {
        name: "开始签到",
        type: "primary",
        icon: "el-icon-plus",
        method: (columns, row) => {
          baseService
            .post("/cam/teacher/startCheck", {
              courseId: row.courseId
            })
            .then((res) => {
              if (res.code === 0) {
                ElMessage.success({
                  message: "成功",
                  duration: 100,
                  onClose: () => {
                    getList();
                  }
                });
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {});
        },
        disabled: false
      },
      {
        name: "停止签到",
        type: "primary",
        icon: "el-icon-plus",
        method: (columns, row) => {
          baseService
            .post("/cam/teacher/endCheck", {
              courseId: row.courseId
            })
            .then((res) => {
              if (res.code === 0) {
                ElMessage.success({
                  message: "停止签到",
                  duration: 100,
                  onClose: () => {
                    getList();
                  }
                });
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {});
        },
        disabled: false
      },
      {
        name: "考勤情况查看",
        type: "primary",
        icon: "el-icon-plus",
        method: (columns, row) => {
          addOrUpdateHandle(row);
        },
        disabled: false
      }
    ]
  : student.value
  ? [
      {
        name: "签到",
        type: "primary",
        icon: "el-icon-plus",
        method: (columns, row) => {
          baseService
            .post("/cam/student/signCourse", {
              courseItemId: row.id
            })
            .then((res) => {
              if (res.code === 0) {
                ElMessage.success({
                  message: "签到完成",
                  duration: 100,
                  onClose: () => {
                    getList();
                  }
                });
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {});
        },
        disabled: false
      },
      {
        name: "请假",
        type: "primary",
        icon: "el-icon-plus",
        method: (columns, row) => {
          if (row.attenStatus !== "未考勤") {
            return ElMessage.error("当前课程无法请假");
          }
          leaveHandle(row);
        },
        disabled: false
      }
    ]
  : [];

onMounted(() => {
  getTeacherList();
  getList();
});

const getTeacherList = () => {
  let param = {
    roleName: "教师"
  };
  baseService
    .post("/cam/user/getList", param)
    .then((res) => {
      if (res.code === 0) {
        teacherList.value = res.data;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};
const getList = (name, id) => {
  let param = {
    ...pageCurrent,
    query: {
      teacherName: state.dataForm.teacherName,
      courseName: state.dataForm.courseName
    }
  };
  baseService
    .post("/cam/atten/pageCourse", param)
    .then((res) => {
      if (res.code === 0) {
        pageList.value = res.data.records;
        total.value = res.data.total;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};

const pageSize = (val) => {
  pageCurrent.pageSize = val;
  getList();
};
const currentPage = (val) => {
  pageCurrent.pageNum = val;
  getList();
};
const getTeacherName = (id) => {
  if (teacherList.value.length > 0) {
    return teacherList.value.find((item) => {
      return item.id === id;
    }).realName;
  }
};

const addOrUpdateRef = ref();
const addOrUpdateHandle = (row?: object) => {
  addOrUpdateRef.value.init(row);
};
const addOrUpdateRefq = ref();
const leaveHandle = (row?: object) => {
  addOrUpdateRefq.value.init(row);
};
</script>